import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { MyMvWrap } from "./style";
import {
  getSizeImageXY,
  getCountPoint,
  formalMinuteSeconds,
} from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function MyMv() {
  const state = useSelector(
    (state) => ({
      myMvInfo: state.getIn(["myMusicInfo", "mvSublistInfo"]),
    }),
    shallowEqual
  );

  return (
    <MyMvWrap>
      <p className="u-title">我的视频（{state.myMvInfo.count}）</p>
      <div className="mvRadio">
        <ul>
          {state.myMvInfo.code === 200
            ? state.myMvInfo.data.map((item, index) => {
                return (
                  <li key={item.vid}>
                    <div className="myMvBox">
                      <NavLink
                        to={{
                          pathname: "/mv",
                          search: "?id=" + item.vid,
                        }}
                        className="mvA"
                      >
                        <img
                          src={getSizeImageXY(item.coverUrl, 159, 90)}
                          alt=""
                        />
                        <p className="trp maskP">
                          <span className="videoi icon2"></span>
                          {getCountPoint(item.playTime)}
                        </p>
                        <p className="mvtime maskP">
                          {formalMinuteSeconds(item.durationms)}
                        </p>
                      </NavLink>
                      <h4 className="title">
                        <i className="icon2"></i>
                        <NavLink
                          to={{
                            pathname: "/mv",
                            search: "?id=" + item.vid,
                          }}
                        >
                          {item.title}
                        </NavLink>
                      </h4>
                      <h5 className="name">
                        {item.creator.map((itema, indexa) => {
                          return (
                            <NavLink
                              to={{
                                pathname: "/artist",
                                search: "?id=" + itema.userId,
                              }}
                              key={itema.userId}
                            >
                              {itema.userName}
                            </NavLink>
                          );
                        })}
                      </h5>
                    </div>
                  </li>
                );
              })
            : ""}
        </ul>
      </div>
    </MyMvWrap>
  );
});
